<template>
  <div ref="div">
    App {{ count }}
    <AChild ref="aChild" />
    <BChild ref="bChild" />

    <button @click="update">按钮</button>
  </div>
</template>

<script>
import AChild from "./A.vue";
import BChild from "./B.vue";

export default {
  name: "App",
  components: {
    AChild,
    BChild,
  },
  data() {
    return {
      count: 1,
    };
  },
  mounted() {
    // console.log(this.$children);
    // console.log(this.$refs.div);
    console.log(this.$refs.aChild.num);
  },
  methods: {
    update() {
      // 直接操作子组件数据（不建议使用）
      this.$refs.aChild.num++;
    },
  },
};
</script>

<style></style>
